<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Provide 提供的数据不是响应式数据, 如果需要让其是响应式数据，则可以如下操作：
            1. 在 Vue3 中，通过 computed 函数来提供数据
            2. 在 Vue2 中，
                - 2.7版本开始，computed 函数也可以使用了。
                - 2.7版本之前，一般的做法是，直接把this传下去

     -->
    <div id="app"></div>
    <!-- <script src="../lib/vue-2.js"></script>

    <script>
      Vue.component("Hello", {
        inject: ["root"],
        components: {
          Button: {
            template: `
              <button>Button</button>
            `,
          },
        },
        template: `
          <div>
            <p>Name: {{ root.name }}</p>  
            <Button />
          </div>
        `,
        created() {
          console.log(this);
        },
      });

      new Vue({
        el: "#app",
        data() {
          return {
            name: "李",
          };
        },
        provide() {
          return {
            // name: this.name,
            // 使用 computed API 来使用，就能响应式
            // name: Vue.computed(() => this.name),

            root: this,
          };
        },
        template: `
          <div>
            <p>Root: {{ name }}</p>
            <button @click="name = '张'">change</button>
            <hr />
            <Hello />  
          </div>
        `,
      });
    </script> -->

    <script src="../lib/vue-3.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            name: "李",
          };
        },
        provide() {
          return {
            // name: this.name,
            // 使用 computed API 来使用，就能响应式
            name: Vue.computed(() => this.name),
          };
        },
        template: `
          <div>
            <p>Root: {{ name }}</p>
            <button @click="name = '张'">change</button>
            <hr />
            <Hello />  
          </div>
        `,
      });

      app.component("Hello", {
        inject: ["name"],
        template: `
          <div>
            <p>Name: {{ name }}</p>  
          </div>
        `,
        created() {
          console.log(this);
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
